<template>
  <div>
    <el-main>
      <!--  搜索表单 -->
      <el-form :inline="true" :model="searchPost" class="demo-form-inline">
        <el-form-item label="岗位编码">
          <el-input v-model="searchPost.postCode" placeholder="岗位编码"></el-input>
        </el-form-item>

        <el-form-item label="岗位名称">
          <el-input v-model="searchPost.name" placeholder="请输入岗位名称"></el-input>
        </el-form-item>

        <el-form-item label="状态">
          <el-select v-model="searchPost.status" placeholder="请选择">
            <el-option label="正常" :value="1"> </el-option>
            <el-option label="禁用" :value="0"> </el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" plain @click="search">查询</el-button>
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="openWindow" plain>新增</el-button>

      <!-- 表格数据 -->
      <!-- :height="tableHeight" -->

      <el-table v-loading="loading" :data="tableList" style="width: 100%; margin-top: 10px" row-key="id" border>
        <el-table-column align="center" label="岗位编号">
          <template slot-scope="scope">
            {{
            (searchPost.pageNo - 1) * searchPost.pageSize + scope.$index + 1
            }}
          </template>
        </el-table-column>

        <el-table-column prop="postCode" label="岗位编码" align="center">
        </el-table-column>
        <el-table-column prop="name" label="岗位名称" align="center">
        </el-table-column>
        <el-table-column prop="status" label="状态" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == 1">正常</el-tag>
            <el-tag v-if="scope.row.status == 0" type="warning">禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="small " @click="handleEdit(scope.row)" type="primary">编辑</el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--  新增 修改对话框 -->
      <system-dialog :title="postDialog.title" :width="postDialog.width" :height="postDialog.height"
        :visible="postDialog.visible" @onClose="onClose" @onConfirm="onConfirm">
        <div slot="content">
          <el-form ref="postRef" :inline="true" :model="postForm" class="demo-form-inline">
            <el-form-item label="岗位编码">
              <el-input v-model="postForm.postCode" placeholder="请输入岗位编码"></el-input>
            </el-form-item>

            <el-form-item label="岗位名称">
              <el-input v-model="postForm.name" placeholder="请输入岗位名称"></el-input></el-form-item>
            <el-form-item label="状态">
              <el-radio v-model="postForm.status" :label="1">正常</el-radio>
              <el-radio v-model="postForm.status" :label="0">禁用</el-radio>
            </el-form-item>
          </el-form>
        </div>
      </system-dialog>
    </el-main>
  </div>
</template>

<script>
  import { postApi } from "@/api/post";

  import SystemDialog from "@/components/system/SystemDialog";

  export default {
    components: {
      SystemDialog: SystemDialog,
    },
    data() {
      return {
        loading: false,
        formInline: {},
        postForm: {
          postCode: "",
          name: "",
          status: 1,
        },
        tableList: [], //  表格数据
        postDialog: {
          title: "新增岗位",
          width: 300,
          height: 200,
          visible: false,
        },
        total: 10,
        searchPost: {
          pageNo: 1,
          pageSize: 10,
          status: 1,
          postCode: "",
          name: "",
        }, // 查询关键字对象
      };
    },
    created() {
      this.search();
    },
    methods: {
      async handleDelete(row) {
        let confirm = await this.$myconfirm("你确定要删除吗？");
        if (confirm) {
          let res = await postApi.deletePostById({ id: row.id });

          this.$message.success("删除成功");
          this.search();
        }
      },
      handleEdit(row) {
        this.postDialog.visible = true;
        // 对象复制
        this.$objCopy(row, this.postForm);
      },
      async onConfirm() {
        let res = null;
        if (this.postForm.id) {
          // 修改操作
          res = await postApi.updateById(this.postForm);
        } else {
          res = await postApi.addPost(this.postForm);
        }

        this.search();
        this.$message.success(res.message);
        this.postDialog.visible = false;
      },
      openWindow() {
        this.$resetForm("postRef", this.postForm);
        this.postDialog.visible = true;
      },
      onClose() {
        this.postDialog.visible = false;
      },
      onSubmit() { },
      async search() {
        try {
          this.loading = true
          let res = await postApi.getPostPage(this.searchPost);
          this.tableList = res.data.records;
          this.total = res.data.total;
          console.log(res);
        } catch (e) {
          console.log(e)
        } finally {
          this.loading = false

        }

      },
    },
  };
</script>

<style scoped>
  /deep/ .has-gutter th {
    background-color: #F2F6FC;
  }
</style>